<template>
  <div id="app">
    <!-- 根据 isNotFound 变量控制组件显示 -->
    <template v-if="!isNotFound">
      <!-- 导航栏 -->
      <title-component></title-component>
    </template>
    
    <!-- 主体内容区 -->
    <RouterView @route-changed="handleRouteChange"></RouterView>
    
    <template v-if="!isNotFound">
      <!-- 版权组件 -->
      <Copyright />
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import TitleComponent from './components/title.vue';
import HomeComponent from './components/home.vue';
import Copyright from './components/Copyright.vue';
import Layout from './components/Layout.vue'

const route = useRoute();
const isNotFound = ref(false);

const handleRouteChange = () => {
  // 判断当前路由是否为 404 路由
  isNotFound.value = route.name === 'not-found';
};
</script>

<style scoped>
/* 去除所有元素的默认内外边距 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* 确保根元素高度为100% */
  height: 100%;
}

body {
  /* 确保body高度为100%，隐藏溢出内容 */
  min-height: 100%;
  overflow-x: hidden;
  /* 禁止文本选择 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#app {
  font-family: Arial, sans-serif;
  /* 使用视口单位确保铺满视口 */
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-image: url('/png/beijing.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative; /* 新增：为伪元素定位 */
}

/* 新增：半透明叠加层，控制背景淡化程度 */
#app::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4); /* 白色半透明，0.4为透明度，可调整 */
  z-index: 1; /* 确保叠加层在背景图之上，内容之下 */
}

/* 确保内容显示在叠加层之上 */
#app > * {
  position: relative;
  z-index: 2;
}
</style>  